<template>
    <div>
        <table>
            <tr>
                <td>书名：</td>
                <td>价格：</td>
                <td>作者id</td>
            </tr>
            <tr v-for="(i,j) in bklistss" :key="j">
                <td :class="{aa:j==1,bb:j==0,cc:j==2}">{{i.name}}</td>
                <td :class="{aa:j==1,bb:j==0,cc:j==2}">{{i.price}}</td>
                <td :class="{aa:j==1,bb:j==0,cc:j==2}">{{i.author_id}}</td>
            </tr>
        </table>
        <button @click="sybk1()">首页</button>
        <button @click="sybk2()">上一页</button>
        <button v-for="(p,y) in fylist" :key="y" value="j" @click="danqianye3(p)">{{p}}</button>
        <button @click="sybk4()" >下一页</button>
        <button @click="sybk5()">尾页</button>
    </div>
</template>

<script>
import {RI_BK_show} from '../axios_send/api.js'
export default {
    name:"BKbshow",
    data(){
        return{
            bklistss:[],
            fylist:[],
            p:1,
            ssa:"",
        }
    },
    methods:{
        bkshow(){
            var data = {"page":this.p}
            RI_BK_show(data)
            .then(res=>{
                console.log(res);
                this.ssa =res.ssa
                this.fylist = res.fylist
                this.bklistss = res.data 
            })
        },
        sybk1(){
            this.p = 1
            this.bkshow()
        },
        sybk2(){
            if(this.p>1){
                this.p -= 1
                this.bkshow()
            }else{
                this.p = 1
                this.bkshow()
            }
        },
        danqianye3(p){
            this.p = p
            this.bkshow()
        },
        sybk4(){
            if(this.p>=this.ssa){
                this.p += this.ssa
                this.bkshow()
            }else{
                this.p=this.ssa
                this.bkshow()
            }
        },
        sybk5(){
            this.p = this.ssa
            this.bkshow()
        }
    },
    created(){
        this.bkshow()
    }
}
</script>

<style>
    .aa{color: red;}
    .bb{color: #000;}
    .cc{color: yellow;}
</style>
